<%= stylesheet_link_tag 'rank/_index' %>

<script type="text/javascript" charset="utf-8">
    bind_method(document, "keydown", goRoot);

    $(function () {
        var main = root.getWidgetById("main");
        main.focus()
        var focusTarget, rankTab;

        // 左37 上38 右39 下40
        main.on("keydown", function (e) {
            e =e || window.event;
            var keyValue = e.which || e.keyCode;
            var data = e.target.con.dataset;
            switch (keyValue) {
                case 13:
                    Cookies.set('prev', "<%= rank_path %>")
                    Cookies.set("<%= rank_path %>", "?row_index=" + data.row_index + "&item_index=" + data.item_index)
                    window.location.href = data.href;
                    break;
                case 37:
                    // 获取选中元素的父元素 rank-tab, 看 data-head 和 data-tail 上的id
                    focusTarget = e.target.con;
                    rankTab = $(focusTarget).parents(".rank-tab").eq(0);
                    if (rankTab.data("head")) {
                        FocusEngine.getWidgetById(rankTab.data("head")).focus();
                    }
                    break;
                case 39:
                    focusTarget = e.target.con;
                    rankTab = $(focusTarget).parents(".rank-tab").eq(0);
                    if (rankTab.data("tail")) {
                        FocusEngine.getWidgetById(rankTab.data("tail")).focus();
                    }
                    break;
            }
        });

        main.on("focus", function (e) {
            $(e.target.con).find(".marquee-truncate").marquee().trigger('forward').off('forward')
        });

        main.on("blur", function (e) {
            $(e.target.con).find(".marquee-truncate").trigger('reset').off('reset')
        });
    });
</script>

<div id="main" fe-role="Switch">
  <div class="rank-scroll-h" fe-role="Scroll" fe-cfg="scroll_dir:h,scroll_duration:0.3,scroll_easing:ease-out">
    <div class="scroll-list" style="width: <%= @ranks.size * 320 + 80 %>px;">
      <% @ranks.each_with_index do |rank, row_index| %>
        <div
          data-head="<%= "rank-tab-#{row_index -1}" if row_index > 0 %>"
          data-tail="<%= "rank-tab-#{row_index +1}" if row_index < @ranks.size - 1 %>"
          class="rank-tab"
          id="rank-tab-<%= row_index %>"
          fe-role="Widget"
          fe-cfg="<%= "default_focus: yes" if row_index === params[:row_index].to_i %>"
        >
          <div class="rank-tab-photo">
            <%= image_tag("/images/ranks/r#{rank[:serial_id]}.jpeg", class: "rank-tab-photo-img") %>
          </div>

          <div class="rank-tab-inner" fe-role="Switch">
            <div
              data-href="<%= playlist_path(id: rank.playlist_id, prev_url: rank_path) %>"
              class="rank-tab-title"
              fe-role="Widget"
            >
              <div class="rank-tab-title-icon">
                <%= image_tag("rank/#{row_index + 1}.png", class: "rank-tab-title-icon-white") %>
                <%= image_tag("rank/green-#{row_index + 1}.png", class: "rank-tab-title-icon-green") %>
              </div>
              <div class="rank-tab-title-text">
                <%= rank[:name] %>
              </div>
            </div>

            <div class="rank-tab-list">

              <% @songs[row_index].each_with_index do |song, item_index| %>
                <div class="rank-tab-item">
                  <div
                    data-href="<%= fullscreen_play_path(play_type: 'once', song_id: song.id) %>"
                    data-row_index="<%= row_index %>"
                    data-item_index="<%= item_index %>"
                    class="rank-tab-item-wrapper"
                    fe-role="Widget"
                    fe-cfg="<%= "default_focus: yes" if item_index === params[:item_index].to_i %>"
                  >
                    <%= image_tag("rank/mask.png", class: "rank-tab-item-wrapper-mask") %>
                    <div class="marquee-truncate overflow-hidden">
                      <span class="marquee-content">
                        <%= "#{item_index + 1}. #{song.name} #{song.redundant_singer_name}" %>
                      </span>
                    </div>
                  </div>
                </div>
              <% end %>

            </div>
          </div>
        </div>
      <% end %>

    </div>
  </div>
</div>
